<template>
  <el-row>
      <el-col :span="24">
          <h1>用户管理&nbsp;>&nbsp;新增｜编辑字典</h1>
      </el-col>
  </el-row>
  <el-form
      label-position="right"
      label-width="auto"
      ref="formEleRef"
      :model="item"
      :rules="rules"
      style="max-width: 600px">
    <el-form-item label="键值：" prop="value">
      <el-input v-model="item.value" />
    </el-form-item>
    <el-form-item label="键名：" prop="label">
      <el-input v-model="item.label" />
    </el-form-item>
    <el-form-item label="类型：" prop="type">
      <el-input v-model="item.type" />
    </el-form-item>
    <el-form-item label="描述：" prop="description">
      <el-input v-model="item.description" />
    </el-form-item>
    <el-form-item label="排序："  prop="sort">
      <el-input v-model="item.sort" />
    </el-form-item>
    <el-form-item label="备注：" prop="remarks">
      <el-input v-model="item.remarks" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSave()">保存</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { ref } from 'vue'
import {ElMessage} from "element-plus"

let storeItem=ref(null)

export default{
  emits:["onCancel"],
  props:["item"],
  mounted(){
    console.log("组件创挂完成")
    storeItem = ref(this.item);
  },
  data(){
    return {
        rules:{
            value:[
                {required: true, message:'请输入键值', trigger:'blur'}
            ],
            label:[
                {required: true, message:'请输入键名', trigger:'blur'}
            ],
            type:[
                {required: true, message:'请输入类型', trigger:'blur'}
            ],
            description:[
                {required: true, message:'请输入描述', trigger:'blur'}
            ],
            sort:[
                {required: true, message:'请输入排序', trigger:'blur'}
            ]
        }
    }
  },
  methods: {
    onSave(){
      let form = this.$refs.formEleRef;
      if(!form){
        return;
      }
      form.validate((valid) => {
        if (valid) {
          let saveForm = {
            id : storeItem.value.id,
            value: storeItem.value.value,
            label: storeItem.value.label,
            type: storeItem.value.type,
            description: storeItem.value.description,
            sort: storeItem.value.sort,
            remarks: storeItem.value.remarks
          }
          console.log("Variable [saveForm] -> " + JSON.stringify(saveForm))
          this.axios.post("/backend/admin/dict/save",saveForm).then((r)=>{
            if(r.status === 200 && r.data.status === 200){
                ElMessage({
                  message:"字典保存成功",
                  type:"success",
                  duration:3000
              })
              this.$emit("onCancel",true)
            }else{
              ElMessage({
                  message: r.data.message,
                  type:"error",
                  duration:3000
              });
            }
          })
        }
      })
    },
    onCancel(){
      this.$emit("onCancel",true)
    }
  }
}

</script>
